<template>
  <div class="morerule" @click="onHelp">
    <van-icon class="fz-20" name="question-o" color="#fff" />
    <p class="questiono">帮助与解疑</p>
  </div>

  <van-popup v-model:show="state.visible" position="bottom" :style="{ height: '100%' }" closeable>
    <div class="help">
      <div class="title">下单指引</div>
      <div class="content-box">
        <img class="help-img" src="@/assets/img/help.png" alt="" />
        <div class="second-title">关于什么是团购码？</div>
        <p class="des">团购码是购买商品后系统自动跳转的含二维码的页面，如图示找到券码的方式：登录美团--点击“我的”--点击“待使用”-点击“查看券码”-截图</p>
      </div>
      <div v-for="(item, index) in helpList" :key="index" class="content-box">
        <div class="second-title">{{ item.title }}</div>
        <p class="des">{{ item.des }}</p>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { defineComponent, reactive } from 'vue';
const helpList = [{
  title: '关于预约时间',
  des: '因蛋糕为当天新鲜现做，请至少提前3小时预定，可预约30天内订单，具体以店铺公告为准'
}, {
  title: '关于退货/订单修改',
  des: '蛋糕属生鲜定制产品，一经生产后不支持临时退订，如需申请退款，请在下单后30分钟内，联系客服处理； 如需修改订单配送时间或地址及祝福语，请至少在配送时间前提前2小时以上及时联系客服处理，距配送时间不足2小时，订单不再支持修改（微信公众号在线客服：08:30-22:00，电话客服07:30-24:00）'
}, {
  title: '关于配送',
  des: '由于配送规划原因，我们会在您下单时选择的【时间段内】送货，暂不支持某个时间点送货。比如您选择【12-13点区间送货】，暂无法满足【12点30分收货】，请您知晓 下单成功后请您保持手机畅通，配送员在配送前将与您联系，配送过程中若遇接通拥堵、暴风雨恶劣天气等不可控因素，可能会延迟送达时间，请主人谅解哦'
}, {
  title: '关于祝福语',
  des: '如需祝福语，在下单时祝福语框内填写祝福语（填写8字以内），祝福语将在蛋糕插牌上打印展示'
}, {
  title: '关于客服',
  des: '客服在线时间：08:30-22:00'
}]

export default defineComponent({
  setup() {
    const state = reactive({
      visible: false
    })
    const show = () => {
      state.visible = true
    }
    const onHelp = () => {
      state.visible = true
    }
    const onClose = () => {
      state.visible = false
    }
    return {
      state,
      show,
      onHelp,
      onClose,
      helpList,
    }
  }
})
</script>

<style lang="less" scoped>
.morerule {
  position: absolute;
  right: 10px;
  top: 10px;
  text-align: center;
  .questiono {
    font-size: 12px;
    text-align: left;
    color: white;
  }
}
.help {
  padding: 20px;
  .title {
    margin-bottom: 16px;
    color: #393939;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
  }

  .help-img {
    float: right;
    margin: 0 30px 0 14px;
  }

  .content-box {
    margin-bottom: 20px;
    font-size: 14px;
    .second-title {
      font-weight: bold;
      color: #4b4b4b;
    }
    .des {
      color: #898989;
      font-size: 14px;
      line-height: 20px;
    }
  }
}
</style>
